<template>
	<div class="login-container">
		<el-form ref="myForm" :model="logForm" :rules="rules" label-width="80px">
			<el-form-item label="用户名" prop="user">
				<el-input v-model="logForm.user"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="logForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="login">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { getToken } from '../../api/http'
export default {
	name: 'LogIn',
	data() {
		return {
			logForm: {
				user: '',
				password: ''
			},
			rules: {
				user: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ min: 3, message: '用户名不少于3位', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 3, message: '密码不少于3位', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		login() {
			this.$refs.myForm.validate((flag) => {
				if (flag) {
					getToken().then(res => {
						const { token } = res.data;
						localStorage.setItem('token', token);
						this.$router.push('/');
					}).catch(err => {
						console.log(err);
					})
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
	.login-container {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.el-form {
			width: 300px;
			padding: 20px 20px 0 0;
			border-radius: 5px;
			border: 1px solid #e2e2e2;
			box-shadow: 10px 10px 5px 5px #f2f2f2;
		}
	}
</style>